<template>
    <div class="clickLike-wrapper">
      <FloatIcon :successLoadedIconGroup="successLoadedIconGroup" :allIconIsLoaded="allIconIsLoaded" ref="floatIcon" />
      <BoomIcon :successLoadedIconGroup="successLoadedIconGroup" :allIconIsLoaded="allIconIsLoaded" ref="boomIcon" />
      <div class="hand-icon" :class="[info.mode === 0 ? 'ls-icon' : 'ps-icon', isAction ? 'action' : '']"></div>
      <ClickNumber :roomInfo="roomInfo" ref="clickNumber" />
    </div>
  </template>
  
  <script>
    import FloatIcon from './FloatIcon'; // 漂浮图标组件
    import BoomIcon from './BoomIcon'; // 图标爆炸组件
    import ClickNumber from './ClickNumber'; // 数字显示组件
    export default {
      name: "clickLike",
      components: {
        FloatIcon, // 漂浮图标组件
        BoomIcon, // 图标爆炸组件
        ClickNumber, // 数字显示组件
      },
      props: {
        roomInfo: Object,
      },
      data() {
        return {
          info: this.roomInfo.roomInfo ? this.roomInfo.roomInfo : this.roomInfo.videoInfo,
          allIconIsLoaded: false, // 所有图标加载完成标识
          isAction: false, // 手势动画标识
          successLoadedIconGroup: [], // 加载完成的icon
  
          _initTimeTag: 0, // 初始化时间标识
        }
      },
      mounted() {
        this._initTimeTag = Date.now();
        // 加载icon
        this.loadIcons();
      },
      methods: {
        async loadIcons() {
          // 加载图标
          const iconGroup = ["gift1", "gift2", "gift3", "gift4","gift5", "gift6"]; // 图标组
          this.successLoadedIconGroup = await Promise.all(iconGroup.map(name => this.loadIcon(name))); // 加载完成的icon
          this.allIconIsLoaded = true;
        },
        // 加载图标方法
        loadIcon(name) {
          return new Promise((resolve, reject) => {
            const icon = new Image();
            icon.addEventListener('load', () => resolve(icon));
            icon.addEventListener('error', () => reject());
            icon.src = require(`../../assets/images/zan/${name}.png`);
          })
        },
        // 触发动画
        triggerAni() {
          //  手动向icon队列新增icon
          // this.$refs.floatIcon.addNewIcon();
          // 点赞手势动画
          this.isAction = false;
          this.$nextTick(() => setTimeout(() => this.isAction = true, 0));
          // 触发爆炸效果
          this.$refs.boomIcon.boom();
        },
        // 触发接口
        triggerNum() {
          // 数字+1
          this.$refs.clickNumber.increaseNumber(1, true);
        }
      }
    };
  </script>
  
  <style lang="less" scoped>
    .clickLike-wrapper {
      width: 100%;
      height: 100%;
      position: relative;
      .hand-icon {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        &.ls-icon {
          background: url("../../assets/images/lookBack/zan_l.png") center/100% no-repeat;
        }
        &.ps-icon {
          background: url("../../assets/images/lookBack/zan.png") center/100% no-repeat;
        }
        &.action {
          animation: tap-like 0.2s ease 0s;
          @keyframes tap-like {
            0% {
              transform: scale(1);
            }
            70% {
              transform: scale(1.1);
            }
            90% {
              transform: scale(0.9);
            }
            100% {
              transform: scale(1);
            }
          }
        }
      }
    }
  </style>